<!--
 * @description  : 车辆信息登记组件
 * @descriptionDetail: 车辆信息登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="false" title="车辆信息登记" :customBack="handlerBack">
      <view class="nav-right-icon" v-if="!isDisabled" @click="confirmBtn">
        确定
      </view>
    </theme-navbar>
    <u-form :model="carForm" style="padding: 0px 10px;" ref="uForm">
      <u-form-item label="车牌号码" required prop="carNum" :label-width="180">
        <u-input input-align="right" :custom-style="valueStyle" placeholder="请输入车牌号码" :disabled="isDisabled" v-model="carForm.carNum" />
      </u-form-item>
      <u-form-item label="品牌型号" prop="carStyle" :label-width="180">
        <u-input input-align="right" :custom-style="valueStyle" placeholder="请输入品牌型号" :disabled="isDisabled" v-model="carForm.carStyle" />
      </u-form-item>
      <u-form-item label="车辆类型" prop="carTypeName" :label-width="180" right-icon="arrow-right">
        <u-input input-align="right" :custom-style="pointerStyle" placeholder="请选择车辆类型" :disabled="true" v-model="carForm.carTypeName" @tap="!isDisabled&&(carTypeShow=true)" />
      </u-form-item>
      <u-form-item label="车辆颜色" prop="carColorName" :label-width="180" right-icon="arrow-right">
        <u-input input-align="right" :custom-style="pointerStyle" placeholder="请选择车辆颜色" :disabled="true" v-model="carForm.carColorName" @tap="!isDisabled&&(carColorShow=true)" />
      </u-form-item>
      <u-form-item label="车辆照片" prop="images" label-position="top">
        <m-upload
          index="1"
          :multiple="false"
          :maxCount="10"
          :width="150"
          :height="150"
          :fileList="personImagesList"
          :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.m_check_attr}"
          @on-list-change="getImgs"
        ></m-upload>
      </u-form-item>
    </u-form>
    <u-select :list="carTypeDict" v-model="carTypeShow" @confirm="hanlderChangeCarType"></u-select>
    <u-select :list="carColorDict" v-model="carColorShow" @confirm="hanlderChangeCarColor"></u-select>
  </view>
</template>

<script>
import mUpload from "@/components/m-upload.vue";
export default {
  components: {
    mUpload,
  },
  props: {
    carData: {
      type: Object,
      default: () => {},
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      valueStyle: {
        marginRight: "5px",
      },
      personImagesList:[],
      carForm:{
        uuid: "",
        carType: "",
        carTypeName: "",
        carColor: "",
        carColorName: "",
        carStyle: "",
        carNum: "",
      },
      rules:{
        carNum: [
          {
            required: true,
            message: '请输入车牌号码',
            trigger: ['change', 'blur',],
          },
          {
            validator: (rule, value) => {
              return !value || this.$u.test.carNo(value);
            },
            message: '车辆号码不正确',
            trigger: ['change','blur',],
          },
        ],
      },
      carTypeShow: false,
      carTypeDict: this.$store.state.dicts['C_CAR_STYLE'],  // 车辆类型字典数据
      carColorShow: false,
      carColorDict: this.$store.state.dicts['C_CAR_COLOR'],  // 车辆颜色字典数据
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
    }
  },
  onReady() {
    this.$refs.uForm && this.$refs.uForm.setRules(this.rules);
  },
  mounted() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    Object.assign(this.carForm, this.carData, );
    if(this.carForm.images && this.carForm.images.length > 0){
      this.carForm.images.forEach(p => {
        this.personImagesList.push({gfiId: p,});
      });
    }
  },
  methods:{  
    // 选择车辆类型
    hanlderChangeCarType(p) {
      this.carForm.carType = p[0].value;
      this.carForm.carTypeName = p[0].label;
    },
    getImgs(e, pos) {
      this.personImagesList = [...e,];
    },
    // 选择车辆颜色
    hanlderChangeCarColor(p) {
      this.carForm.carColor = p[0].value;
      this.carForm.carColorName = p[0].label;
    },
    // 确认事件
    confirmBtn(){
      this.$refs.uForm.validate(valid => {
        if (valid) { 
          this.carForm.images = [];
          this.personImagesList.forEach(p => {
            this.carForm.images.push(p.gfiId);
          });
          this.$emit("back", this.carForm);
          console.log('表单验证通过');
        }
      });     
    },
    handlerBack() {
      this.$emit("back", null);
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
</style>
